<template>
  <div class="songlist">
    <!-- 歌单分类 -->
    <div class="category">
      <!-- 所有类型选择菜单 -->
      <el-popover placement="bottom-start" :width="500" trigger="hover">
        <!-- 类型选择下拉菜单 -->
        <template #reference>
          <el-button class="currentSelect" @click="currentSelect">
            <!-- 当前选择的标签Name -->
            <span>{{ currentSelectedName }}</span>
            <!-- 右箭头 -->
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-button>
        </template>
       
        <!-- 下拉菜单的内容 -->
        <el-button v-for="( item , index ) in playlistTags" :key="index" 
        @click="changeCategory(index) " 
        style="margin: 0.2rem;" color='#ed5736' plain
        >
        <span>{{ item.name }}</span>
        </el-button>
      </el-popover>

      <!-- 热门标签 -->
      <div class="hotCategory"></div>

    </div>

    <!-- 内容及分页 -->
    <div class="container">
      <!-- 歌单列表 -->


      <!-- 分页 -->
    </div>
  </div>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 引入歌单分类标签api
import playlistTag from '../../api/playList/playlistTag'


// 当前选择标签的Name
let currentSelectedName = ref('华语')
// 歌单全部标签
let playlistTags = ref()
// 点击展开全部标签
async function currentSelect(){
  let res:any = await playlistTag()
  playlistTags.value = res.sub
  // console.log(playlistTags.value);
}

// 点击全部歌单标签某一项跳转歌单详情
function changeCategory(index:number){
  currentSelectedName.value = playlistTags.value[index].name
}
</script>

<style lang="less" scoped> 
.songlist{
  .category{
    display: flex;
    height: 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
    .currentSelect {
      height: 2rem;
      border-radius: 1rem;
      border: 1px solid #ddd;
      color: black;
      font-weight: 600;
      margin-left: 15px;
    }
  }
}
</style>